<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索引擎切换器 - 设置</title>
    <link rel="stylesheet" href="css/options.css">
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <div class="header-content">
                <h1>
                    <span class="icon">🔍</span>
                    搜索引擎切换器
                </h1>
                <p class="subtitle">自定义您的搜索体验</p>
            </div>
        </header>

        <!-- 主要内容 -->
        <main class="main-content">
            <!-- 基本设置 -->
            <section class="section">
                <h2 class="section-title">基本设置</h2>
                <div class="setting-group">
                    <div class="setting-item">
                        <label class="setting-label">
                            <span class="label-text">默认搜索引擎</span>
                            <select id="defaultEngine" class="select-input">
                                <!-- 动态生成 -->
                            </select>
                        </label>
                        <p class="setting-description">选择默认使用的搜索引擎</p>
                    </div>

                    <div class="setting-item">
                        <label class="setting-label">
                            <span class="label-text">在新标签页中打开搜索结果</span>
                            <div class="switch-container">
                                <input type="checkbox" id="openInNewTab" class="switch-input">
                                <span class="switch-slider"></span>
                            </div>
                        </label>
                        <p class="setting-description">搜索结果是否在新标签页中打开</p>
                    </div>
                </div>
            </section>

            <!-- 搜索引擎管理 -->
            <section class="section">
                <h2 class="section-title">搜索引擎管理</h2>
                <div class="setting-group">
                    <div class="setting-item full-width">
                        <label class="setting-label">
                            <span class="label-text">启用的搜索引擎</span>
                        </label>
                        <p class="setting-description">选择要在插件中显示的搜索引擎</p>
                        <div class="engine-list" id="engineList">
                            <!-- 动态生成 -->
                        </div>
                    </div>
                </div>
            </section>

            <!-- 功能设置 -->
            <section class="section">
                <h2 class="section-title">功能设置</h2>
                <div class="setting-group">
                    <div class="setting-item">
                        <label class="setting-label">
                            <span class="label-text">启用搜索建议</span>
                            <div class="switch-container">
                                <input type="checkbox" id="showSuggestions" class="switch-input">
                                <span class="switch-slider"></span>
                            </div>
                        </label>
                        <p class="setting-description">输入时显示搜索建议</p>
                    </div>

                    <div class="setting-item">
                        <label class="setting-label">
                            <span class="label-text">最大建议数量</span>
                            <input type="number" id="maxSuggestions" class="number-input" min="1" max="20" value="8">
                        </label>
                        <p class="setting-description">每次显示的搜索建议数量</p>
                    </div>

                    <div class="setting-item">
                        <label class="setting-label">
                            <span class="label-text">启用右键菜单</span>
                            <div class="switch-container">
                                <input type="checkbox" id="enableContextMenu" class="switch-input">
                                <span class="switch-slider"></span>
                            </div>
                        </label>
                        <p class="setting-description">选中文本时显示搜索菜单</p>
                    </div>

                    <div class="setting-item">
                        <label class="setting-label">
                            <span class="label-text">启用键盘快捷键</span>
                            <div class="switch-container">
                                <input type="checkbox" id="enableKeyboardShortcuts" class="switch-input">
                                <span class="switch-slider"></span>
                            </div>
                        </label>
                        <p class="setting-description">使用键盘快捷键操作</p>
                    </div>
                </div>
            </section>

            <!-- 历史记录设置 -->
            <section class="section">
                <h2 class="section-title">历史记录</h2>
                <div class="setting-group">
                    <div class="setting-item">
                        <label class="setting-label">
                            <span class="label-text">保存搜索历史</span>
                            <div class="switch-container">
                                <input type="checkbox" id="saveHistory" class="switch-input">
                                <span class="switch-slider"></span>
                            </div>
                        </label>
                        <p class="setting-description">记录搜索历史以便快速重复搜索</p>
                    </div>

                    <div class="setting-item">
                        <label class="setting-label">
                            <span class="label-text">最大历史记录数</span>
                            <input type="number" id="maxHistoryItems" class="number-input" min="10" max="1000"
                                value="100">
                        </label>
                        <p class="setting-description">保留的历史记录最大数量</p>
                    </div>

                    <div class="setting-item">
                        <button id="clearAllHistory" class="danger-button">
                            <span class="button-icon">🗑️</span>
                            清空所有历史记录
                        </button>
                        <p class="setting-description">清空所有保存的搜索历史</p>
                    </div>
                </div>
            </section>

            <!-- 自定义搜索引擎 -->
            <section class="section">
                <h2 class="section-title">自定义搜索引擎</h2>
                <div class="setting-group">
                    <div class="setting-item full-width">
                        <button id="addCustomEngine" class="primary-button">
                            <span class="button-icon">➕</span>
                            添加自定义搜索引擎
                        </button>
                        <p class="setting-description">添加您自己的搜索引擎</p>
                    </div>

                    <div class="custom-engines-list" id="customEnginesList">
                        <!-- 动态生成 -->
                    </div>
                </div>
            </section>

            <!-- 主题设置 -->
            <section class="section">
                <h2 class="section-title">外观</h2>
                <div class="setting-group">
                    <div class="setting-item">
                        <label class="setting-label">
                            <span class="label-text">主题</span>
                            <select id="theme" class="select-input">
                                <option value="light">浅色主题</option>
                                <option value="dark">深色主题</option>
                                <option value="auto">跟随系统</option>
                            </select>
                        </label>
                        <p class="setting-description">选择插件的外观主题</p>
                    </div>
                </div>
            </section>

            <!-- 快捷键说明 -->
            <section class="section">
                <h2 class="section-title">快捷键</h2>
                <div class="setting-group">
                    <div class="shortcut-list">
                        <div class="shortcut-item">
                            <span class="shortcut-key">Ctrl + Shift + S</span>
                            <span class="shortcut-desc">切换搜索引擎</span>
                        </div>
                        <div class="shortcut-item">
                            <span class="shortcut-key">Ctrl + Shift + F</span>
                            <span class="shortcut-desc">搜索选中文本</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 地址栏搜索说明 -->
            <section class="section">
                <h2 class="section-title">地址栏搜索设置</h2>
                <div class="setting-group">
                    <div class="setting-item full-width">
                        <div class="info-box">
                            <h3>🔍 关于地址栏搜索</h3>
                            <p>由于浏览器安全限制，扩展无法直接修改地址栏的默认搜索引擎。您可以通过以下步骤手动设置：</p>

                            <div class="manual-steps">
                                <h4>Chrome/Edge 设置方法：</h4>
                                <ol>
                                    <li>打开浏览器设置页面（<code>chrome://settings/</code> 或 <code>edge://settings/</code>）</li>
                                    <li>在左侧菜单选择"搜索引擎"</li>
                                    <li>在"地址栏中使用的搜索引擎"下拉菜单中选择您偏好的搜索引擎</li>
                                    <li>也可以点击"管理搜索引擎和网站搜索"来添加自定义搜索引擎</li>
                                </ol>

                                <div class="tip-box">
                                    <span class="tip-icon">💡</span>
                                    <span><strong>提示：</strong>您可以继续使用本扩展的快捷键快速切换搜索引擎！</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 关于信息 -->
            <section class="section">
                <h2 class="section-title">关于</h2>
                <div class="setting-group">
                    <div class="setting-item full-width">
                        <div class="about-box">
                            <div class="about-header">
                                <h3>智能搜索引擎切换器</h3>
                                <span class="version-badge">v1.0.0</span>
                            </div>

                            <p class="about-description">
                                一个功能丰富的搜索引擎切换插件，让您的搜索体验更加便捷高效。
                            </p>

                            <div class="features-grid">
                                <div class="feature-item">
                                    <span class="feature-icon">🔍</span>
                                    <span>14种主流搜索引擎</span>
                                </div>
                                <div class="feature-item">
                                    <span class="feature-icon">⌨️</span>
                                    <span>快捷键快速切换</span>
                                </div>
                                <div class="feature-item">
                                    <span class="feature-icon">💡</span>
                                    <span>实时搜索建议</span>
                                </div>
                                <div class="feature-item">
                                    <span class="feature-icon">📚</span>
                                    <span>搜索历史记录</span>
                                </div>
                                <div class="feature-item">
                                    <span class="feature-icon">⭐</span>
                                    <span>收藏常用搜索</span>
                                </div>
                                <div class="feature-item">
                                    <span class="feature-icon">🎨</span>
                                    <span>现代化界面设计</span>
                                </div>
                            </div>

                            <div class="copyright-box">
                                <p><strong>Copyright © 2021-Present ZhaiFanhua All Rights Reserved.</strong></p>
                                <p>如有问题或建议，欢迎反馈！</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <!-- 底部 -->
        <footer class="footer">
            <div class="footer-actions">
                <button id="resetSettings" class="secondary-button">重置设置</button>
                <button id="saveSettings" class="primary-button">保存设置</button>
            </div>
            <div class="footer-info">
                <p>版本 1.0.0 | 让搜索更简单高效</p>
            </div>
        </footer>

        <!-- 状态消息 -->
        <div class="toast" id="toast" style="display: none;">
            <span id="toastMessage"></span>
        </div>
    </div>

    <!-- 自定义搜索引擎表单弹窗 -->
    <div class="modal" id="customEngineModal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加自定义搜索引擎</h3>
                <button class="modal-close" id="modalClose">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="modalEngineName">搜索引擎名称</label>
                    <input type="text" id="modalEngineName" class="form-input" placeholder="例如：我的搜索">
                </div>
                <div class="form-group">
                    <label for="modalEngineUrl">搜索URL</label>
                    <input type="text" id="modalEngineUrl" class="form-input"
                        placeholder="例如：https://example.com/search?q={query}">
                    <small>使用 {query} 作为搜索关键词的占位符</small>
                </div>
                <div class="form-group">
                    <label for="modalEngineIcon">图标（可选）</label>
                    <input type="text" id="modalEngineIcon" class="form-input" placeholder="🔍">
                </div>
            </div>
            <div class="modal-footer">
                <button id="modalCancel" class="secondary-button">取消</button>
                <button id="modalSave" class="primary-button">保存</button>
            </div>
        </div>
    </div>

    <!-- 脚本 -->
    <script src="js/config.js"></script>
    <script src="js/theme-manager.js"></script>
    <script src="js/options.js"></script>
</body>

</html>